<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        height="calc(100vh - 400px)"
        border
        style="width: 100%"
        empty-text="暂无数据"
        :loading="loading"
      >
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" prop="name" label="用户组名"></el-table-column>
        <el-table-column align="center" prop="description" label="用户组描述"></el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="180"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              icon="el-icon-edit-outline"
              style="font-size: 18px"
            ></el-button>
            <el-popconfirm
              title="确定删除吗?"
              style="margin-left: 10px;"
              @onConfirm="handleDelete(scope.row)"
            >
              <el-button type="text" icon="el-icon-delete" style="font-size: 18px" slot="reference"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: right;margin-top: 8px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="prev, pager, next, sizes,total"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import userEdit from "./UserGroupEdit";

export default {
  name: "tableComponent",
  props: {
    tableData: {
      type: Array,
      default: [],
      required: true,
    },
    total: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    pageSizes: {
      type: Array,
      default: [10, 20, 50, 100],
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      rowData: {},
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      formQuery: {
        name: "",
        sex: "",
      },
      editTitle: "提示",
      dialogVisible: false,
    };
  },
  components: {
    userEdit,
  },
  methods: {
    handleClick(row) {
      if (row) {
        this.dialogVisible = true;
        this.editTitle = "修改用户组";
        this.rowData = row;
      } else {
        this.dialogVisible = true;
        this.editTitle = "添加用户组";
        this.rowData = {};
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.onSubmit(null, val);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.onSubmit(val, this.pageSize);
    },
    //查询方法
    onSubmit(currentPage, pageSize) {
      this.formQuery.currentPage = currentPage ? currentPage : 1;
      this.formQuery.pageSize = pageSize ? pageSize : this.pageSize;
      this.initTableData(this.formQuery);
    },
    onReset() {
      this.formQuery = {
        name: "",
      };
    },
    handleDelete(row) {
      this.$httpDelete(
        this.$axiosBaseHttp,
        "api/rest/userGroupInfo/del/" + row.id,
        {}
      ).then((res) => {
        if (res.code === 200) {
          this.$successMsg("删除成功");
        } else {
          this.$errorMsg("删除失败");
        }
        this.onSubmit(null, null);
      });
    },
    //子组件方法回调
    callBackFromSub(param) {
      this.dialogVisible = param;
      this.initTableData(this.formQuery);
    },
    //初始化表格数据
    initTableData(param) {
      this.loading = true;
      this.$httpGet(
        this.$axiosBaseHttp,
        "api/rest/userGroupInfo/list/page",
        param
      ).then((res) => {
        if (res.code === 200) {
          this.total = res.data.total;
          this.pageSize = res.data.size;
          this.tableData = res.data.records;
        }
        this.loading = false;
      });
    },
  },
  mounted() {
    this.onSubmit(null, null);
  },
};
</script>

<style scoped>
</style>